<template>
	<view class="wha d_f">
		<view class="">
			<canvas
				id="canvasMain"
				canvas-id="canvasMain"
				@mousedown="_mouseDown"
				@mousemove="_mouseMove"
				@mouseup="_mouseUp"
			></canvas>
			{{x}}-{{y}}
		</view>
		<view class="tool_box">
			
			<!-- 图形按钮 -->
			<view class="operate_box o_a d_f_fsrwc">
				<view class="ml20 mt20" @click="drawObject(item.type)" v-for="item in btns" :class="type == item.type ? 'btn_active' : '' ">
					<image class="btn_img" :src="item.src"></image>
					<view class="tac">{{item.name}}</view>
				</view>
			</view>
			
			<!-- 样式 -->
			<view class="operate_box o_a d_f_fsrwc">
				<view class="ml20 mt20" @click="changeObjectStyle(item.type)" v-for="item in styleBtns" :class="type == item.type ? 'btn_active' : '' ">
					<image class="btn_img" :src="item.src"></image>
					<view class="tac">{{item.name}}</view>
				</view>
			</view>
			
			<!-- 输入 -->
			<view class="operate_box o_a d_f_fsrwc">
				<view class="">
					<input class="point_input" type="text"></input>
					<input class="point_input" type="color"></input>
				</view>
			</view>
			
		</view>
		<!-- 
			1 点击绘制	直线、曲线、波浪线、多边形
			2 拖动绘制	文字、箭头、三角形、梯形
			3 获取useId
			4 显示外框、变形点、旋转点
			5 拖动换位置
			6 拖动缩放
			7 换背景色、边框
			8 换背景图
			9 输入顶点、点击增加顶点（可选）
			10 变换层级
			11 保存
			12 框选、合并图层
		 -->
	</view>
</template>
<script>
	export default {
		name: 'canvasMain',
		props: [],
		data() {
			return {
				canvasW: 800,
				canvasH: 400,
				ctx: null,
				btns: [
					{
						name: '直线',
						src: require('@/static/canvas/line.png'),
						type: 'line'
					},{
						name: '弧线',
						src: require('@/static/canvas/curve.png'),
						type: 'curve'
					},{
						name: '波浪线',
						src: require('@/static/canvas/wave.png'),
						type: 'wave'
					},{
						name: '箭头',
						src: require('@/static/canvas/arrow.png'),
						type: 'arrow'
					},{
						name: '文字',
						src: require('@/static/canvas/text.png'),
						type: 'text'
					},{
						name: '三角形',
						src: require('@/static/canvas/triangle.png'),
						type: 'triangle'
					},{
						name: '梯形',
						src: require('@/static/canvas/trapezoid.png'),
						type: 'trapezoid'
					},{
						name: '多边形',
						src: require('@/static/canvas/polygon.png'),
						type: 'polygon'
					}
				],
				styleBtns: [
					{
						name: '没有背景',
						src: require('@/static/canvas/bg_none.png'),
						type: 'bg_none'
					},
					{
						name: '斜线背景',
						src: require('@/static/canvas/bg_line.png'),
						type: 'bg_line'
					},
					{
						name: '点阵背景',
						src: require('@/static/canvas/bg_point.png'),
						type: 'bg_point'
					}
				],
				pbl: 0,		// canvas与页面偏移量
				pbt: 0,
				x: 0,		// 鼠标位置
				y: 0,
				
				datas: [
					{ id: 'aaa',type: 'line',pit: [[130,350],[210,190],[280,150],[350,190],[430,350]],bg: 'f0f',lc: 'f00' },
					{ id: 'bbb',type: 'line',pit: [[220,200],[350,190],[350,260],[210,260]],bg: 'ff0',lc: '' },
					{ id: 'ccc',type: 'line',pit: [[120,200],[250,190]],bg: '',lc: '' }
				],	// 所有画图内容存储
				// 状态管理
				type: '',	// 直线 line，曲线 curve，波浪线 wave，箭头 arrow，文字 text，三角形 triangle，梯形 trapezoid，多边形： polygon，
				isDrawing: false,
				
				// 被选中
				useId: 0,
			}
		},
		mounted() {
			// this.getInfo();
			// this.init();
		},
		methods: {
			onColorChange(e){
				// console.log(e)
			},
			// getInfo() {
			// 	let that = this;
			// 	const query = uni.createSelectorQuery()
			// 	query.select('#canvasMain').boundingClientRect(data => {
			// 		// data为包含位置信息的对象
			// 		that.pbl = data.left;
			// 		that.pbt = data.top;
			// 		// console.log('视图元素相对于页面顶部的距离', data.top, data.left);
			// 	}).exec();
			// },
			init() {
				// let c = uni.createCanvasContext('canvasMain');	// canvas 实体
				// this.ctx = c;
				
				// this.draw();
			},
			_mouseDown(e) {
				// let x = e.clientX - this.pbl,
					// y = e.clientY - this.pbt;
				// console.log('isDrawing',this.isDrawing)
				
				// 当有被选中的 且在选中的图形内时，可以拖拽
				if( this.useId ) {
					
				}
				
				// 非画图状态
				if( !this.type ) {
					// 如果在图形范围内
					this.selectObject();
				}
			},
			_mouseMove(e) {
				// this.x = e.clientX - this.pbl;		// 抛去相对页面偏移量
				// this.y = e.clientY - this.pbt;
			},
			_mouseUp(e) {
				// let that = this
				// let x = e.clientX - this.pbl,
				// 	y = e.clientY - this.pbt;
				// 正在画时
				if( this.type ) {
					
				} else {
					// 没画,选中
					console.log(999,x,y,that.checkInObject(x,y))
				}
				
				
				if( this.isDrawing ) {
					// 画线,第二下结束
					if(this.type == 'line' || this.type == 'curve') {
						var theOne = this.datas.find( obj => {
							return obj.id == this.useId
						})
						theOne.pit.push([x,y])
						this.type = '';
						// this.useId = '';
						this.isDrawing = false;
						console.log(this.datas)
						this.draw()
					}
					
				} else {
					if( !this.type ){
						
					} else {
						let useId = 'object';
						this.isDrawing = true;
						// 一个新useId
						let num = this.datas.length;
						this.datas.push({id: useId + num,type: this.type,pit: [[this.x,this.y]],bg: 'fff',lc: '000'})
						this.useId = useId + num;
					}
				}
			},
			// 获取坐标点最大值和最小值
			// getMaxMin(data) {
			// 	let max = 1,
			// 	min = 1;
			// 	data.forEach((item,index) => {
			// 		if(item.x > max) max = item.x;
			// 		if(item.y < min) min = item.y;
			// 		if(index == data.length) {
			// 			return max,min
			// 		}
			// 	})
			// },
			// 选择绘画类型
			drawObject(type) {
				this.type = type;
				switch(type) {
					case 'line' :
						console.log(1)	
						break
					case 'curve' :
						console.log(2)	
						break
					case 'wave' :
						console.log(3)	
						break
					case 'arrow' :
						console.log(4)	
						break
					case 'text' :
						console.log(5)	
						break
					case 'triangle' :
						console.log(6)	
						break
					case 'trapezoid' :
						console.log(7)	
						break
					case 'polygon' :
						console.log(8)	
						break
				}
			},
			// 更改样式
			// changeObjectStyle(type) {
				
			// },
			// 判断是否在元素内
			// checkInObject(x,y) {
			// 	this.datas.map(( item, index ) => {
			// 		console.log(item)
			// 		if(this.IsPointInMatrix(item.pit,x,y)) {
			// 			this.useId = item.id;
			// 			// 显示拖拽框
			// 			// console.log()
			// 			return false
			// 		} else {
			// 			// 点了空白的地方
			// 			this.useId = '';
			// 		}
			// 	})
			// },
			// IsPointInMatrix( polygon, x, y ) {
			// 	var inside = false;
			// 	for (var i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
			// 		var xi = polygon[i][0], yi = polygon[i][1];
			// 		var xj = polygon[j][0], yj = polygon[j][1];
			// 		var intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
			// 		if (intersect)inside = !inside;
			// 	}
			// 	return inside;
			// },
			// 绘制
			// draw() {
			// 	let c = this.ctx;
			// 	c.clearRect(0, 0, this.canvasW, this.canvasH);
			// 	this.datas.map(( item, index ) => {
			// 		c.save();
			// 		c.beginPath();
			// 		if( item.lc ) {
			// 			c.strokeStyle = '#' + item.lc;
			// 		}
			// 		console.log(this.type)
			// 		item.pit.map(( ite, ind ) => {
			// 			// 画直线
			// 			if( item.type == 'line' ) {
			// 				if( ind == 0 ) {
			// 					c.moveTo( ite[0], ite[1] );
			// 				} else {
			// 					c.lineTo( ite[0], ite[1] );
			// 				}
			// 			}
			// 			// 画曲线
			// 			if(this.type == 'curve') {
			// 				console.log(ite)
			// 				if( ind == 0 ) {
			// 					c.moveTo( ite[0], ite[1] );
			// 				} else {
			// 					c.quadraticCurveTo( ite[0], ite[1] );
			// 				}
			// 			}
			// 		})
					
			// 		if( item.bg ){
			// 			c.fillStyle = '#' + item.bg;
			// 			c.fill() 			//填充颜色
			// 		}
			// 		c.closePath() 		//闭合路径
			// 		c.stroke();
			// 		c.strokeStyle = '#000';
			// 	})
			// 	c.draw();
			// },
			// 选择图形对象
			selectObject(e) {
				
			},
		}
	}
</script>
<style>
	#canvasMain{
		width: 800px;
		height: 400px;
		margin-left: 30px;
		margin-top: 30px;
		border: 1px solid #ccc;
	}
	.tool_box{
		width: 300px;
		height: 50px;
		margin-left: 20px;
		margin-top: 20px;
	}
	.btn_img{
		width: 40px;
		height: 40px;
	}
	.btn_active{
		background-color: red;
	}
	.operate_box{
		width: 600px;
	}
	.point_input{
		border: 1px solid #ccc;
		padding: 4px;
	}
</style>